<script>
export default {
  onLaunch: function () {
    console.log("App Launch");
  },
  onShow: function () {
    console.log("App Show");
  },
  onHide: function () {
    console.log("App Hide");
  },
};
</script>

<style lang="scss">
/* 全局样式 */
@import "./uni.scss";

/* 移除所有元素默认内外边距 */
page {
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  background-color: $uni-bg-color-grey;
  box-sizing: border-box;
}

/* 基础容器样式 */
.container {
  width: 100%;
  padding-left: $spacer-4;
  padding-right: $spacer-4;
}

/* 弹性布局 */
.flex {
  display: flex;

  &-column {
    display: flex;
    flex-direction: column;
  }

  &-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  &-1 {
    flex: 1;
  }
}

/* 文本样式 */
.text {
  &-primary {
    color: $uni-color-primary;
  }

  &-success {
    color: $uni-color-success;
  }

  &-warning {
    color: $uni-color-warning;
  }

  &-error {
    color: $uni-color-error;
  }

  &-grey {
    color: $uni-text-color-grey;
  }

  &-white {
    color: $uni-text-color-inverse;
  }

  &-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  &-center {
    text-align: center;
  }

  &-left {
    text-align: left;
  }

  &-right {
    text-align: right;
  }
}

/* 外边距 */
@for $i from 0 through 10 {
  .mt-#{$i} {
    margin-top: $spacer * $i;
  }
  .mr-#{$i} {
    margin-right: $spacer * $i;
  }
  .mb-#{$i} {
    margin-bottom: $spacer * $i;
  }
  .ml-#{$i} {
    margin-left: $spacer * $i;
  }
  .mx-#{$i} {
    margin-left: $spacer * $i;
    margin-right: $spacer * $i;
  }
  .my-#{$i} {
    margin-top: $spacer * $i;
    margin-bottom: $spacer * $i;
  }
}

/* 内边距 */
@for $i from 0 through 10 {
  .pt-#{$i} {
    padding-top: $spacer * $i;
  }
  .pr-#{$i} {
    padding-right: $spacer * $i;
  }
  .pb-#{$i} {
    padding-bottom: $spacer * $i;
  }
  .pl-#{$i} {
    padding-left: $spacer * $i;
  }
  .px-#{$i} {
    padding-left: $spacer * $i;
    padding-right: $spacer * $i;
  }
  .py-#{$i} {
    padding-top: $spacer * $i;
    padding-bottom: $spacer * $i;
  }
}

/* 圆角 */
.rounded {
  border-radius: $uni-border-radius-base;

  &-sm {
    border-radius: $uni-border-radius-sm;
  }

  &-lg {
    border-radius: $uni-border-radius-lg;
  }

  &-circle {
    border-radius: $uni-border-radius-circle;
  }
}

/* 阴影 */
.shadow {
  box-shadow: $box-shadow-base;

  &-card {
    box-shadow: $box-shadow-card;
  }

  &-hover {
    box-shadow: $box-shadow-hover;
  }
}

/* 卡片 */
.card {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-base;
  overflow: hidden;
  box-shadow: $box-shadow-card;
}

/* 按钮 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacer-2 $spacer-4;
  border-radius: $uni-border-radius-base;
  font-size: $uni-font-size-base;
  line-height: 1.5;
  text-align: center;
  border: 1px solid transparent;

  &-primary {
    background: $gradient-primary;
    color: $uni-text-color-inverse;
  }

  &-success {
    background: $gradient-success;
    color: $uni-text-color-inverse;
  }

  &-sm {
    padding: $spacer-1 $spacer-3;
    font-size: $uni-font-size-sm;
  }

  &-lg {
    padding: $spacer-3 $spacer-5;
    font-size: $uni-font-size-lg;
  }

  &-block {
    width: 100%;
  }
}

/* 渐变背景 */
.bg-gradient {
  &-primary {
    background: $gradient-primary;
  }

  &-success {
    background: $gradient-success;
  }
}
</style>
